/** 计时器模块 */
import React, { Component } from 'react'

// 导入数据模块
import store from '../store'
// 导入数据操作请求对象
import {
  countIncrementAction,
  countDecrementAction
} from '../store/counter/counterCreator'

export default class Counter extends Component {

  add() {
    // 发起请求增加数据
    // 结构化拆分的目的，尽量减少开发人员手工拼接对象的代码
    // 手工拼接的代码出错的概率较大，降低错误率，提高后期维护性
    // store.dispatch({type: "counter/increment", data: 1})
    store.dispatch(countIncrementAction(1))
  }

  sub() {
    store.dispatch(countDecrementAction(1))
  }

  componentDidMount() {
    store.subscribe(() => {
      // 数据一旦发生更新，刷新页面
      this.setState({})
    })
  }

  render() {
    return (
      <div>
        <h3>计数器模块：redux结构化拆分的应用</h3>
        <h4>计数器：{store.getState()}</h4>
        <div>
          <button onClick={this.add.bind(this)}>增加</button>
          <button onClick={this.sub.bind(this)}>减少</button>
        </div>
      </div>
    )
  }
}
